import "./recommend.scss"
import { connect } from 'react-redux';
import { getRec } from "../../action/action";
import Zmage from 'react-zmage';
import { PullToRefresh } from 'antd-mobile';

class RecommendUI extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            refreshing: false,
            down: true,
            height: document.documentElement.clientHeight,
            data: [],
        }
    }
    componentDidMount() {
        this.props.init()
    }
    render() {
        let { recData } = this.props;
        if (recData) {
            // 先空着
            // let imgList = recData.itemList[1].data.itemList.map((item, index) => (
            //     <div className="slide-item" key={index}>
            //         <img src={item.data.image} />
            //     </div>
            // ))
            let FollowCard = recData.itemList.map((item, index) => {
                if (index > 2) {
                    return (
                        <div className="item" key={index}>
                            <Zmage src={item.data.content.data.cover.detail} preset="mobile" backdrop="#fff" edge={0} hotKey={{
                                // 关闭（ESC）
                                close: true,
                                // 缩放（空格）
                                zoom: true,
                                // 翻页（左右）
                                flip: true,
                            }} controller={{
                                // 关闭按钮
                                close: true,
                                // 缩放按钮
                                zoom: true,
                                // 旋转按钮
                                rotate: true,
                                // 翻页按钮
                                flip: true,
                                // 多页指示
                                pagination: true,
                            }} />
                            <h3>{item.data.content.data.description}</h3>
                            <div className="info">
                                <div className="via">
                                    <img src={item.data.content.data.owner.avatar} />
                                </div>
                                <div className="msg">
                                    <p>{item.data.content.data.owner.nickname}</p>
                                </div>
                            </div>
                        </div>
                    )
                }
            })
            return (
                <PullToRefresh
                    damping={60}
                    ref={el => this.ptr = el}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                    indicator={this.state.down ? {} : { deactivate: '下拉可以刷新' }}
                    direction={this.state.down ? 'down' : 'up'}
                    refreshing={this.state.refreshing}
                    onRefresh={() => {
                        this.setState({ refreshing: true });
                        setTimeout(() => {
                            location.reload()
                            this.setState({ refreshing: false });
                        }, 1000);
                    }}
                >
                    <div className="recommend">
                        {/* <div className="imgs">
                        <div className="slide-box">
                            {imgList}
                        </div>
                    </div> */}
                        <div className="container">
                            <div className="waterfall">
                                {FollowCard}
                            </div>
                        </div>
                    </div>
                </PullToRefresh>
            )
        } else {
            return (
                <div></div>
            )
        }
    }
}

let mstp = ({ rec }) => rec;
let mdtp = dispatch => {
    return {
        init() {
            dispatch(getRec())
        }
    }
}

export let Recommend = connect(mstp, mdtp)(RecommendUI)